<template>
	<view class="content">
		<view class="logo"  >
			<image class="logo-img" :src="avatar"></image>
			<view class="logo-title">
				<view class="uni-list-item__content txt">
					<text class="uer-name">{{userInfo.userName}}</text>
					<text class="re-uni-list-item__content-note">{{userInfo.deptName}}</text>
				</view>
			</view>
		</view>
		
		<view style="display: flex; text-align: center; margin-bottom: 20px;">
			<view style="width: 50%; ">
				<view>已完成项目</view>
				<view>{{completionNum}}</view>
			</view>
			
			<view style="width: 40%;">
				<view>进行中项目</view>
				<view>{{unCompletionNum}}</view>
			</view>
		</view>
		
		<uni-grid :column="4" :show-border="false" :highlight="true" @change="change">
			<uni-grid-item v-for="(item, index) in menuList" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<!-- <uni-icons type="image" :size="30" color="#777" /> -->
					<view class="image_box">
						<image :src="item.imgUrl" class="image image-sw" mode="aspectFill" />
					</view>
					<text class="text">{{ item.name }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<view style="padding: 0 14px;margin-top: 20px;">
			<swiper class="swiper-sw" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(i,index) in bannerList" :key="index" @click="openLink(i.link)">
					<image class="banner" :src="i.image.replace('http://localhost:18000/manage',baseUrl)">
				</swiper-item>
			</swiper>
		</view>

		<!-- <view class="notice">
			<view class="notice_head">
				<span class="notice_head_title">通知消息</span>
				<image src="@/static/workOverTime/btn_message.png" style="width: 24px;height: 24px;"
					@click="routeUrl('../notice/notice')">
			</view>
		</view> -->
		<!-- <view class="notice_body" v-for="(item, i) in noticeList" :key="i">
			<view v-show="i<10">
				<view class="notice_body_text" @click="routeUrl('../notice/notice_info?id='+item.id)">
					<view class="notice_body_text_title">{{item.title}}</view>
					<view class="notice_body_text_content">
						{{
							simpleNotice(item.content)
						}}
					</view>
				</view>
				<hr v-show="i!=noticeList.length-1" />
			</view>
		</view> -->

	</view>
</template>

<script>
	import {
		listBanner
	} from '@/api/banner.js'
	import {
		listNotice
	} from '@/api/notice.js'

	import {
		countProject
	} from '@/api/projectManager.js'
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				// nickname: uni.getStorageSync('nickname'),
				avatar: uni.getStorageSync('avatar') ? uni.getStorageSync('avatar').replace('http://localhost:18000/manage',getApp().globalData.baseUrl) : '../../static/txl/ico_logo_@3x.png',
				
				baseUrl: getApp().globalData.baseUrl,
				menuList: [
					// {
					// 	name: "工作通知",
					// 	imgUrl: require("@/static/ico_daiban.png"),
					// 	route: "/pages/notice/notice",
					// },
					// {
					// 	name: "考勤打卡",
					// 	imgUrl: require("../../static/ico_sign.png"),
					// 	route: "/pages/attendance/attendance",
					// },
					// {
					// 	name: "公文管理",
					// 	imgUrl: require("@/static/ico_gongwen.png"),
					// 	route: "/pages/gongwen/index1",
					// },
					{
						name: "外聘管理",
						imgUrl: require("@/static/ico_workOvertime.png"),
						route: "/pages/typeManager/externalManager/externalManager",
					},
					{
						name: "客户管理",
						imgUrl: require("@/static/ico_leave.png"),
						route: "/pages/typeManager/customerManager/customerManager",
					},
					{
						name: "设备类型",
						imgUrl: require("@/static/ico_travel.png"),
						route: "/pages/typeManager/deviceManager/deviceManager",
					},
					{
						name: "拍摄类型",
						imgUrl: require("@/static/ico_goOut.png"),
						route: "/pages/typeManager/shootingTypeManager/shootingTypeManager",
					},
					{
						name: "后期类型",
						imgUrl: require("@/static/ico_patchCard.png"),
						route: "/pages/typeManager/postProductionTypeManager/postProductionTypeManager",
					}

				],
				bannerList: [],
				noticeList: [],
				uColumn: 4,
				dindex: 8,
				sitem: true,
				idots: true,
				recordCount: "",
				recordList: "",
				formData: {
					user_id: uni.getStorageSync("username"),
				},
				unCompletionNum:0,
				completionNum:0,
			};
		},
		onLoad() {
			this.getInit();
			this.getRemind();

		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			console.log('uni.getStorageSync',uni.getStorageSync('userInfo'))
			console.log('this.userInfo',this.userInfo)
			this.getInit();
			this.getRemind();
			this.getSystemInfo();
		},

		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
		},
		methods: {
			simpleNotice(content){

				let newcontent = content.replace('<p>','').replace('</p>','');
				
				let reg = /<(.*?)>/gms;
				// console.log(reg.exec(newcontent));
				newcontent = newcontent.replace(reg,'')
				
				return newcontent;
			},
			openLink(link) {
				if (link == '') {
					return false
				}
				let p = encodeURIComponent(link)
				uni.navigateTo({
					url: `/pages/webview/index?path=${p}`
				})
			},
			onPullDownRefresh() {
				this.getRemind();
				this.getSystemInfo();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			getSystemInfo() {
				var _this = this;
				let Height = uni.getSystemInfoSync().screenHeight;
				let Width = uni.getSystemInfoSync().screenWidth;
				if (Width >= 500) {
					_this.uColumn = 6
					_this.dindex = 12
					_this.sitem = false
					_this.idots = false
				}
				if (Width >= 1000) {
					_this.uColumn = 8
					_this.dindex = 8
					_this.sitem = true
					_this.idots = true
				}
				if (Width >= 1200) {
					_this.uColumn = 11
					_this.dindex = 10
					_this.sitem = true
					_this.idots = true
				}
			},
			//获取代办数量
			getRemind() {

			},

			change(e) {
				console.log(uni.getStorageSync('Token'))
				if( !uni.getStorageSync('Token').length & uni.getStorageSync('Token').length == 0){
					uni.switchTab({
						url: '../login/login',
					});
				}
				this.routeUrl(this.menuList[e.detail.index].route);
			},
			getInit() {
				// this.getBanner();
				// this.getNoticeList();
				this.getCount();
			},
			routeUrl(url) {
				uni.navigateTo({
					url: url,
				});
			},
			async getCount(){
				var res = null;
				try {
					res = await countProject({
					});
					console.log(res)
					this.completionNum = res.data.completionNum
					this.unCompletionNum = res.data.unCompletionNum
					// this.bannerList = res.data
				} catch (err) {
				
				}
			},
			
			async getBanner() {
				var res = null;
				try {
					res = await listBanner({
						data: {}
					});
					this.bannerList = res.data
				} catch (err) {

				}
			},
			async getNoticeList() {

				var res = null;
				try {
					res = await listNotice({
						page: {
							pageNum: 1,
							pageSize: 5
						},
						data: {}
					});
					
					this.noticeList = res.data
				} catch (err) {
					console.log(err)
				}
			},
		},
	};
</script>


<style lang="scss" scoped>
	.u-content {
		padding: 24rpx;
		max-height: 30rpx;
	}

	.content {
		margin: 0 auto;
		width: 100%;
		// max-width: 720px;
		background-color: #fff;
		padding: 0;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
	}

	.swiper-item {
		width: 100%;
		height: 200px;
	}

	.mswiper {
		height: 400rpx;
	}



	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.swiper {
		height: 200px;
		margin-top: 60px;
	}


	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		// justify-content: center;
		padding: 30rpx 30rpx;
	}

	.remind {
		position: absolute;
		z-index: 9999;
		right: -24rpx;
		top: -24rpx;
		width: 50rpx;
		line-height: 50rpx;
		color: #fff;
		text-align: center;
		background-color: #ee0000;
		font-size: 28rpx;
		border-radius: 50%;
		padding: 5rpx;
	}
	
	.logo {
		background-color: #e8e8e8;
		width: 750rpx;
		height: 252rpx;
		padding: 0 32rpx 0 36rpx;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		display: flex;
		// background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0f215899-37db-41b7-8231-51232da1a1a3/750d3eb5-53cc-4eab-9fd4-07debb5bfb72.png);
		// background-size: 100% auto;
		// background-repeat: no-repeat;
		// background-position-y: -75px;
		// background-color: #ffffff;
		margin-bottom: 10px;
	}
	
	.logo-hover {
		opacity: 0.8;
	}
	
	.logo-img {
		width: 120rpx;
		height: 120rpx;
		display: inline-block;
	}
	
	.logo-title {
		/* height: 150rpx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row; */
		margin-left: 32rpx;
		display: inline-block;
		/* position:relative;
		z-index:99999; */
	}
	
	.uer-name {
		color: #333333;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 18px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: left;
	}
	.re-uni-list-item__content-note {
		color: #999999;
		font-family: PingFang SC;
		font-weight: medium;
		font-size: 13px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: left;
	}
	@media screen and (min-width: 500px) {
		.grid-item-sw {
			height: 140px;
			width: 140px;
		}

		.swiper-item {
			width: 100%;
			height: 260px;
			/* #ifdef MP */
			height: 280px;
			/* #endif */
		}

		.text {
			font-size: 16px;
			margin-top: 10rpx;
		}

		.mswiper {
			height: 260px;
			/* #ifdef MP */
			height: 280px;
			/* #endif */
		}

		.image-sw {
			width: 60px;
			height: 60px;
		}

		.swiper-sw {
			height: 122px;
		}

		.flap-sw {
			margin: 115rpx 28rpx 20rpx;
		}

		.flap {
			height: 300px;
			margin-bottom: 100px;
			/* #ifdef MP */
			margin-bottom: 120px;
			/* #endif */
		}

		.grid-item-box {
			padding: 25px 25px;
			/* #ifdef APP-PLUS */
			padding: 40px 15px;
			/* #endif */
		}

		.remind {
			right: -20rpx;
			top: -20rpx;
			width: 26px;
			line-height: 26px;
			font-size: 16px;
			padding: 5rpx;
		}
	}

	@media screen and (min-width: 1000px) {
		.swiper-sw {
			height: 180px;
		}

		.flap {
			height: 300px;
			margin-bottom: 30px;
		}

		.mswiper {
			height: 180px;
		}

		.grid-item {
			height: 180px;
		}

		.image-sw {
			width: 80px;
			height: 80px;
		}

		.flap-sw {
			margin: 120px 28rpx 20rpx;
		}

		.remind {
			right: -30rpx;
			top: -30rpx;
			width: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx;
			padding: 10rpx;
			/* #ifdef MP */
			right: -10px;
			top: -10px;
			width: 25px;
			line-height: 25px;
			font-size: 16px;
			padding: 5px;
			/* #endif */
		}

	}

	@media screen and (min-width: 1200px) {

		.flap {
			margin-bottom: 20px;
		}


		.image-sw {
			width: 60px;
			height: 60px;
		}

		.remind {
			right: -35rpx;
			top: -35rpx;
		}

	}

	.menuList {
		list-style: none;
		padding: 0;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		background-color: #fff;
		flex-wrap: wrap;
		border: 1px solid #fff;
		border-radius: 6px;
		// padding-top: 20rpx;
		box-shadow: 0 1px 10px 1px #e8e8e8;
	}

	.uni-grid {
		justify-content: center;
	}

	.menuList-item {
		width: 18%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 10px 0px 10px;
		padding: 3px 9px 2px;
	}

	.menuList-item-img {
		width: 42px;
		height: 42px;
	}

	.menuList-item-name {
		font-size: 12px;
		color: #333;
		margin-top: 6px;
	}

	.banner {
		width: 100%;
		height: 100%;
		border: 1px solid #fff;
		border-radius: 6px;
	}

	.notice_head {
		display: flex;
		justify-content: space-between;
	}

	.notice_head_title {
		color: #999;
		font-size: 16px;
		font-weight: bold;
		position: relative;
	}

	.notice_head_title::after {
		position: absolute;
		left: 50%;
		bottom: 0;
		margin-left: -7px;
		margin-bottom: -5px;
		content: "";
		width: 14px;
		height: 4px;
		background-color: #3b7af5;
		border-radius: 30%;
	}

	.notice,
	.notice_body {
		padding: 0 14px;
		margin-top: 18px;
	}

	.notice_body_text {
		width: 100%;
	}

	.notice_body_text_title {
		padding: 6px 20px 6px 0;
		color: #333;
		font-weight: bold;
		font-size: 15px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.notice_body_text_content {
		margin: 6px 0 18px;
		color: #999;
		font-size: 12px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.image_box {
		position: relative;
	}
</style>